// /**
// //  * Magento
//  *
//  * NOTICE OF LICENSE
//  *
//  * This source file is subject to the Academic Free License (AFL 3.0)
//  * that is bundled with this package in the file LICENSE_AFL.txt.
//  * It is also available through the world-wide-web at this URL:
//  * http://opensource.org/licenses/afl-3.0.php
//  * If you did not receive a copy of the license and are unable to
//  * obtain it through the world-wide-web, please send an email
//  * to license@magentocommerce.com so we can send you a copy immediately.
//  *
//  * DISCLAIMER
//  *
//  * Do not edit or add to this file if you wish to upgrade Magento to newer
//  * versions in the future. If you wish to customize Magento for your
//  * needs please refer to http://www.magentocommerce.com for more information.
//  *
//  * @category    design
//  * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
//  * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
//  */

// When pager items have solid or don't have background
// -------------------------------------------------------
.pager(
    @_pager-label-display: @pager-label-display,
    @_pager-item-display: @pager-item-display,
    @_pager-reset-spaces: @pager-reset-spaces,
    @_pager-font-size: @pager-font-size,
    @_pager-font-weight: @pager-font-weight,
    @_pager-line-height: @pager-line-height,
    @_pager-item-margin: @pager-item-margin,
    @_pager-item-padding: @pager-item-padding,
    @_pager-actions-padding: @pager-actions-padding,
    // Page current
    @_pager-current-font-weight: @pager-current-font-weight,
    @_pager-current-color: @pager-current-color,
    @_pager-current-background: @pager-current-background,
    @_pager-current-border: @pager-current-border,
    @_pager-current-gradient: @pager-current-gradient,
    @_pager-current-gradient-direction: @pager-current-gradient-direction,
    @_pager-current-gradient-start-color: @pager-current-gradient-start-color,
    @_pager-current-gradient-end-color: @pager-current-gradient-end-color,
    // Page item - text color
    @_pager-color: @pager-color,
    @_pager-color-visited: @pager-color-visited,
    @_pager-color-hover: @pager-color-hover,
    @_pager-color-active: @pager-color-active,
    // Page item - background
    @_pager-background: @pager-background,
    @_pager-background-visited: @pager-background-visited,
    @_pager-background-hover: @pager-background-hover,
    @_pager-background-active: @pager-background-active,
    // Page item - border
    @_pager-border: @pager-border,
    @_pager-border-visited: @pager-border-visited,
    @_pager-border-hover: @pager-border-hover,
    @_pager-border-active: @pager-border-active,
    // Page item - text decoration
    @_pager-text-decoration: @pager-text-decoration,
    @_pager-text-decoration-hover: @pager-text-decoration,
    //  Page item gradient
    @_pager-gradient: @pager-gradient,
    @_pager-gradient-direction: @pager-gradient-direction,
    @_pager-gradient-start-color: @pager-gradient-start-color,
    @_pager-gradient-end-color: @pager-gradient-end-color,
    @_pager-gradient-start-color-visited: @pager-gradient-start-color-visited,
    @_pager-gradient-end-color-visited: @pager-gradient-end-color-visited,
    @_pager-gradient-start-color-hover: @pager-gradient-start-color-hover,
    @_pager-gradient-end-color-hover: @pager-gradient-end-color-hover,
    @_pager-gradient-start-color-active: @pager-gradient-start-color-active,
    @_pager-gradient-end-color-active: @pager-gradient-end-color-active,
    // Page action item (previous-next)
    @_pager-action-text-decoration: @pager-action-text-decoration,
    @_pager-action-text-decoration-hover: @pager-action-text-decoration-hover,
    // Page action item (previous-next) - default
    @_pager-action-color: @pager-action-color,
    @_pager-action-border: @pager-action-border,
    @_pager-action-background: @pager-action-background,
    @_pager-action-gradient-start-color: @pager-gradient-start-color,
    @_pager-action-gradient-end-color: @pager-gradient-end-color,
    @_pager-action-text-decoration: @pager-action-text-decoration,
    // Page action item (previous-next) - visited
    @_pager-action-color-visited: @pager-action-color-visited,
    @_pager-action-border-visited: @pager-action-border-visited,
    @_pager-action-background-visited: @pager-action-background-visited,
    @_pager-action-gradient-start-color-visited: @pager-gradient-start-color-visited,
    @_pager-action-gradient-end-color-visited: @pager-gradient-end-color-visited,
    // Page action item (previous-next) - hover
    @_pager-action-color-hover: @pager-action-color-hover,
    @_pager-action-border-hover: @pager-action-border-hover,
    @_pager-action-background-hover: @pager-action-background-hover,
    @_pager-action-gradient-start-color-hover: @pager-gradient-start-color-hover,
    @_pager-action-gradient-end-color-hover: @pager-gradient-end-color-hover,
    @_pager-action-text-decoration-hover: @pager-action-text-decoration,
    // Page action item (previous-next) - active
    @_pager-action-color-active: @pager-action-color-active,
    @_pager-action-border-active: @pager-action-border-active,
    @_pager-action-background-active: @pager-action-background-active,
    @_pager-action-gradient-start-color-active: @pager-gradient-start-color-active,
    @_pager-action-gradient-end-color-active: @pager-gradient-end-color-active,
    // Page action item (previous-next) - gradient
    @_pager-action-gradient: @pager-gradient,
    @_pager-action-gradient-direction: @pager-gradient-direction,
    // Page action icons
    @_pager-icon-use: @pager-icon-use,
    @_pager-icon-previous-content: @pager-icon-previous-content,
    @_pager-icon-next-content: @pager-icon-next-content,
    @_pager-icon-font: @pager-icon-font,
    @_pager-icon-font-size: @pager-icon-font-size,
    @_pager-icon-font-line-height: @pager-icon-font-line-height,
    @_pager-icon-font-margin: @pager-icon-font-margin,
    @_pager-icon-font-vertical-align: @pager-icon-font-vertical-align,
    @_pager-icon-font-position: @pager-icon-position,
    @_pager-icon-font-text-hide: @pager-icon-text-hide
) {
    ._pager-label-display(  // To hide or to display label
        @_pager-label-display: @_pager-label-display,
        @_pager-font-size: @_pager-font-size,
        @_pager-line-height: @_pager-line-height
    );
    .items {
        ._pager-inline-block-spaces-container();
        .list-reset-styles();
        .css(display, @_pager-item-display);
        .css(font-weight, @_pager-font-weight);
    }
    .item {
        ._pager-inline-block-spaces-item(
            @_pager-font-size: @_pager-font-size,
            @_pager-line-height: @_pager-line-height
        );
        .css(margin, @_pager-item-margin);
        .css(display, @_pager-item-display);
        .label {
            .visually-hidden();
        }
    }
    a.page {
        .css(background, @_pager-background);
        .background-gradient(
            @_pager-gradient-start-color,
            @_pager-gradient-end-color,
            @_pager-gradient-direction,
            @_pager-gradient
        );
        .css(border, @_pager-border);
        .css(padding, @_pager-item-padding);
        .css(color, @_pager-color);
        .css(display, @_pager-item-display);
        .css(text-decoration, @_pager-text-decoration);
        &:visited {
            .css(background, @_pager-background-visited);
            .background-gradient(
                @_pager-gradient-start-color-visited,
                @_pager-gradient-end-color-visited,
                @_pager-gradient-direction,
                @_pager-gradient
            );
            .css(border, @_pager-border-visited);
            .css(color, @_pager-color-visited);
        }
        &:hover {
            .css(background, @_pager-background-hover);
            .background-gradient(
                @_pager-gradient-start-color-hover,
                @_pager-gradient-end-color-hover,
                @_pager-gradient-direction,
                @_pager-gradient
            );
            .css(border, @_pager-border-hover);
            .css(color, @_pager-color-hover);
            .css(text-decoration, @_pager-text-decoration-hover);
        }
        &:active {
            .css(background, @_pager-background-active);
            .background-gradient(
                @_pager-gradient-start-color-active,
                @_pager-gradient-end-color-active,
                @_pager-gradient-direction,
                @_pager-gradient
            );
            .css(border, @_pager-border-active);
            .css(color, @_pager-color-active);
        }
    }
    strong.page {
        .css(background, @_pager-current-background);
        .background-gradient(
            @_pager-current-gradient-start-color,
            @_pager-current-gradient-end-color,
            @_pager-current-gradient-direction,
            @_pager-current-gradient
        );
        .css(border, @_pager-current-border);
        ._pager-inline-block-spaces-item(
            @_pager-font-size: @_pager-font-size,
            @_pager-line-height: @_pager-line-height
        );
        .css(padding, @_pager-item-padding);
        .css(color, @_pager-current-color);
        .css(display, @_pager-item-display);
        .css(font-weight, @_pager-current-font-weight);
    }
    .action {
        .css(background, @_pager-action-background);
        .background-gradient(
            @_pager-action-gradient-start-color,
            @_pager-action-gradient-end-color,
            @_pager-gradient-direction,
            @_pager-action-gradient
        );
        .css(border, @_pager-action-border);
        .css(padding, @_pager-actions-padding);
        .css(color, @_pager-action-color);
        .css(display, @_pager-item-display);
        .css(text-decoration, @_pager-action-text-decoration);
        &:visited {
            .css(background, @_pager-action-background-visited);
            .background-gradient(
                @_pager-action-gradient-start-color-visited,
                @_pager-action-gradient-end-color-visited,
                @_pager-action-gradient-direction,
                @_pager-action-gradient
            );
            .css(border, @_pager-action-border-visited);
            .css(color, @_pager-action-color-visited);
        }
        &:hover {
            .css(background, @_pager-action-background-hover);
            .background-gradient(
                @_pager-action-gradient-start-color-hover,
                @_pager-action-gradient-end-color-hover,
                @_pager-action-gradient-direction,
                @_pager-action-gradient
            );
            .css(border, @_pager-action-border-hover);
            .css(color, @_pager-action-color-hover);
            .css(text-decoration, @_pager-action-text-decoration-hover);
        }
        &:active {
            .css(background, @_pager-action-background-active);
            .background-gradient(
                @_pager-action-gradient-start-color-active,
                @_pager-action-gradient-end-color-active,
                @_pager-action-gradient-direction,
                @_pager-action-gradient
            );
            .css(border, @_pager-action-border-active);
            .css(color, @_pager-action-color-active);
        }
        &.next {
            ._pager-icon (
                @_pager-icon-use: @_pager-icon-use,
                @_icon-font-content: @_pager-icon-next-content,
                @_icon-font: @_pager-icon-font,
                @_icon-font-size: @_pager-icon-font-size,
                @_icon-font-line-height: @_pager-icon-font-line-height,
                @_icon-font-color: @_pager-action-color,
                @_icon-font-color-hover: @_pager-action-color-hover,
                @_icon-font-color-active: @_pager-action-color-active,
                @_icon-font-margin: @_pager-icon-font-margin,
                @_icon-font-vertical-align: @_pager-icon-font-vertical-align,
                @_icon-font-position: @_pager-icon-font-position,
                @_icon-font-text-hide: @_pager-icon-font-text-hide
            );
        }
        &.previous {
            ._pager-icon (
                @_pager-icon-use: @_pager-icon-use,
                @_icon-font-content: @_pager-icon-previous-content,
                @_icon-font: @_pager-icon-font,
                @_icon-font-size: @_pager-icon-font-size,
                @_icon-font-line-height: @_pager-icon-font-line-height,
                @_icon-font-color: @_pager-action-color,
                @_icon-font-color-hover: @_pager-action-color-hover,
                @_icon-font-color-active: @_pager-action-color-active,
                @_icon-font-margin: @_pager-icon-font-margin,
                @_icon-font-vertical-align: @_pager-icon-font-vertical-align,
                @_icon-font-position: @_pager-icon-font-position,
                @_icon-font-text-hide: @_pager-icon-font-text-hide
            );
        }
    }
}

//  Delete spaces between elements when pager items have display: inline-block
._pager-inline-block-spaces-container() when (@_pager-reset-spaces = true) and (@_pager-item-display = inline-block) {
    .inline-block-space-container();
    white-space: nowrap;
}

._pager-inline-block-spaces-item(
    @_pager-font-size: @_pager-font-size,
    @_pager-line-height: @_pager-line-height
) when (@_pager-reset-spaces = true) and (@_pager-item-display = inline-block) {
    .inline-block-space-item(
        @_font-size: @_pager-font-size,
        @_line-height: @_pager-line-height
    );
}

// Display or hide "page" label
._pager-label-display(
    @_pager-label-display: @_pager-label-display,
    @_pager-font-size: @_pager-font-size,
    @_pager-font-weight: @_pager-font-weight,
    @_pager-line-height: @_pager-line-height
) when not (@_pager-label-display = none){
    > .label {
        .css(display, @_pager-label-display);
        .css(font-weight, @_pager-font-weight);
        .inline-block-space-item(
            @_font-size: @_pager-font-size,
            @_line-height: @_pager-line-height
        );
        &:after {
            content: ': ';
        }
    }
}

._pager-label-display(
    @_pager-label-display: @_pager-label-display,
    @_pager-font-size: @_pager-font-size,
    @_pager-font-weight: @_pager-font-weight,
    @_pager-line-height: @_pager-line-height
) when (@_pager-label-display = none) {
    > .label {
        .visually-hidden();
    }
}

._pager-label-display(
    @_pager-label-display: @_pager-label-display,
    @_pager-font-size: @_pager-font-size,
    @_pager-font-weight: @_pager-font-weight,
    @_pager-line-height: @_pager-line-height
) when (@_pager-label-display = false) {
    > .label {
        .visually-hidden();
    }
}

._pager-icon (
    @_pager-icon-use: @_pager-icon-use,
    @_icon-font-content,
    @_icon-font: @_pager-icon-font,
    @_icon-font-size: @_pager-icon-font-size,
    @_icon-font-line-height: @_pager-icon-font-line-height,
    @_icon-font-color: @_pager-action-color,
    @_icon-font-color-visited: @_pager-action-color-visited,
    @_icon-font-color-hover: @_pager-action-color-hover,
    @_icon-font-color-active: @_pager-action-color-active,
    @_icon-font-margin: @_pager-icon-font-margin,
    @_icon-font-vertical-align: @_pager-icon-font-vertical-align,
    @_icon-font-position: @_pager-icon-font-position,
    @_icon-font-text-hide: @_pager-icon-font-text-hide
) when (@_pager-icon-use = true) and (@_icon-font-position = before) {

    &:visited:before {
        .css(color, @_icon-font-color-visited);
    }
    &:active:before {
        .css(color, @_icon-font-color-active);
    }
    .icon-font(
        @_icon-font-content: @_icon-font-content,
        @_icon-font: @_icon-font,
        @_icon-font-size: @_icon-font-size,
        @_icon-font-line-height: @_icon-font-line-height,
        @_icon-font-color: @_icon-font-color,
        @_icon-font-color-hover: @_icon-font-color-hover,
        @_icon-font-color-active: @_icon-font-color-active,
        @_icon-font-margin: @_icon-font-margin,
        @_icon-font-vertical-align: @_icon-font-vertical-align,
        @_icon-font-position: @_icon-font-position,
        @_icon-font-text-hide: @_icon-font-text-hide
    );
}

._pager-icon (
    @_pager-icon-use: @_pager-icon-use,
    @_icon-font-content,
    @_icon-font: @_pager-icon-font,
    @_icon-font-size: @_pager-icon-font-size,
    @_icon-font-line-height: @_pager-icon-font-line-height,
    @_icon-font-color: @_pager-action-color,
    @_icon-font-color-visited: @_pager-action-color-visited,
    @_icon-font-color-hover: @_pager-action-color-hover,
    @_icon-font-color-active: @_pager-action-color-active,
    @_icon-font-margin: @_pager-icon-font-margin,
    @_icon-font-vertical-align: @_pager-icon-font-vertical-align,
    @_icon-font-position: @_pager-icon-font-position,
    @_icon-font-text-hide: @_pager-icon-font-text-hide
) when (@_pager-icon-use = true) and (@_icon-font-position = after) {
    .icon-font(
        @_icon-font-content: @_icon-font-content,
        @_icon-font: @_icon-font,
        @_icon-font-size: @_icon-font-size,
        @_icon-font-line-height: @_icon-font-line-height,
        @_icon-font-color: @_icon-font-color,
        @_icon-font-color-hover: @_icon-font-color-hover,
        @_icon-font-color-active: @_icon-font-color-active,
        @_icon-font-margin: @_icon-font-margin,
        @_icon-font-vertical-align: @_icon-font-vertical-align,
        @_icon-font-position: @_icon-font-position,
        @_icon-font-text-hide: @_icon-font-text-hide
    );
    &:visited:after {
        .css(color, @_icon-font-color-visited);
    }
    &:active:after {
        .css(color, @_icon-font-color-active);
    }
}
